<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
		<style>
			table {
				margin: 50px auto ;
				width: 500px;
				border: 1px solid darkgray;
				border-collapse: collapse;
			}
			
			thead th {
				height: 40px;
				background-color: #00BFFF;
				border-collapse: collapse;
				border: 1px solid black;
			}
			
			tbody td {
				height: 50px;
				border: 1px solid gray;
			}
			
			table tr:hover {
				background-color: whitesmoke;
			}
		</style>
		<script>
			window.onload = function() {
				//得到tbody的节点信息以及包含tr的数组
				var tbody = document.getElementById("tbody");
				var trArr = tbody.getElementsByTagName("tr");
				//				alert(bdTr.length);
				for(var i = 0; i < trArr.length; i++) {
					if(i % 2 != 0) {
						trArr[i].style.backgroundColor = "darkgray";
					} else {
						trArr[i].style.backgroundColor = "#ccc";

					}
					//添加高亮显示
					//鼠标在tr标签中时，将该行tr加载高亮
					var color = "";
					trArr[i].onmouseover = function () {
						//错误记录：匿名函数中trArr[i]是函数的主体，不能算是参数，在函数内外都包含
						//有trArr[i]容易产生参数错误,所以用this来替代
						color = this.style.backgroundColor;
						this.style.backgroundColor = "#FFFFFF";
					}
					trArr[i].onmouseout = function () {
						this.style.backgroundColor = color;
					}
				}

				//添加高亮显示
				//鼠标在tr标签中时，将该行tr加载高亮
				var color = "";

			}
		</script>
	</head>

	<body>
		<table>
			<thead>
				<tr>
					<th>序号</th>
					<th>姓名</th>
					<th>课程</th>
					<th>成绩</th>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
				<tr>
					<td>1</td>
					<td>吕不韦</td>
					<td>语文</td>
					<td>100</td>
				</tr>
			</tbody>
		</table>

	</body>

</html>